<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      :btnList="fullInfo.btnList"
    >
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <PageForm
            ref="pageFormRef"
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :data="formInfo.data"
            :field-list="formInfo.fieldList"
            :label-width="formInfo.labelWidth"
            :rules="formInfo.rules"
          ></PageForm>
        </div>
      </div>
    </NewFullScreen>
  </div>
</template>

<script setup name="orgModify">
import { createOrg, updateOrg } from '@/api/base.js'
const emits = defineEmits()
const store = useStore()
const { proxy } = getCurrentInstance()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  tableRow: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
// 表单相关
const formInfo = ref({
  ref: null,
  data: {},
  fieldList: [
    {
      label: '名称',
      value: 'name',
      type: 'input',
    },
    {
      label: proxy.$t('code'),
      value: 'code',
      type: 'input',
    },
    {
      label: '统一社会信用代码',
      value: 'uniformSocialCreditCode',
      type: 'input',
      maxlength: 20,
      disabled:
        props.tableRow.id && store.getters.userInfo.user.type !== 'system_admin'
          ? 'disabled'
          : false,
    },
    {
      label: proxy.$t('zip_code'),
      value: 'zipCode',
      type: 'input',
    },
    {
      label: proxy.$t('email'),
      value: 'mail',
      type: 'input',
    },
    {
      label: proxy.$t('tel'),
      value: 'phone',
      type: 'input',
    },
    {
      label: proxy.$t('fax'),
      value: 'fax',
      type: 'input',
    },
    {
      label: proxy.$t('org_type'),
      value: 'type',
      type: 'select-model',
      multiple: true,
      code: 'org_type',
    },
    {
      label: '服务范围',
      value: 'serviceScope',
      type: 'select-model',
      code: 'service_scope',
      checkDefault: false,
    },
    {
      label: proxy.$t('status'),
      value: 'status',
      type: 'radio-model',
      code: 'enabled_type',
    },
    {
      label: proxy.$t('admin_username'),
      value: 'adminUsername',
      type: 'input',
    },
    { label: proxy.$t('city'), value: 'cities', type: 'city-model' },
    {
      label: '是否往来机构',
      value: 'isRelationshipOrg',
      type: 'select-model',
      show: props.tableRow && props.tableRow.id ? false : true,
      code: 'yes_or_no',
    },
    {
      label: proxy.$t('address'),
      value: 'address',
      type: 'input',
      /* className: "not-br", */
    },
    {
      label: proxy.$t('desc'),
      value: 'remark',
      type: 'textarea',
      /* className: "not-br", */
    },
  ],
  rules: {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    code: [
      { required: true, message: '请输入编码', trigger: 'blur' },
      { validator: proxy.$validate.validatEn, trigger: 'blur' },
    ],
    type: [{ required: true, message: '请选择机构类型', trigger: 'change' }],
    // serviceScope: [{ required: true, message: '请选择服务范围', trigger: 'change' }],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }],
    adminUsername: [
      { required: true, message: '请输入管理员账号', trigger: 'blur' },
      { validator: proxy.$validate.validatEn, trigger: 'blur' },
    ],
    zipCode: [{ validator: proxy.$validate.zipCode, trigger: 'blur' }],
    mail: [{ validator: proxy.$validate.mail, trigger: 'blur' }],
    phone: [{ validator: proxy.$validate.cellphone, trigger: 'blur' }],
    fax: [{ validator: proxy.$validate.fax, trigger: 'blur' }],
  },
  labelWidth: '120px',
})
const fullInfo = ref({
  btnList: [{ label: '保存', event: save, show: true }],
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val) // 更新父组件visible
  },
})

function save() {
  const _formInfo = formInfo.value
  proxy.$refs.pageFormRef.$refs.form.validate((valid) => {
    if (valid) {
      const params = _formInfo.data
      params.province = _formInfo.data.cities ? _formInfo.data.cities[0] : ''
      params.city = _formInfo.data.cities ? _formInfo.data.cities[1] : ''
      params.county = _formInfo.data.cities ? _formInfo.data.cities[2] : ''
      const api = props.tableRow.id ? updateOrg : createOrg
      api(params).then((res) => {
        if (res.success) {
          showDialog.value = false
          emits('returnModify', false)
        }
      })
    }
  })
}

onMounted(() => {
  if (props.tableRow.id) {
    formInfo.value.fieldList.filter(
      (item) => item.value === 'status'
    )[0].disabled = true
    formInfo.value.fieldList.filter(
      (item) => item.value === 'type'
    )[0].disabled = true
    formInfo.value.fieldList.filter(
      (item) => item.value === 'adminUsername'
    )[0].disabled = true
    formInfo.value.fieldList.filter(
      (item) => item.value === 'code'
    )[0].disabled = store.getters.userInfo.user.type !== 'system_admin'
    formInfo.value.data = { ...props.tableRow }
  }
})
</script>

<style scoped></style>
